<template>
    <div class="full-width full-height">
        <div class="count-title">
            <div class="text-title mb8">今日成交总额</div>
            <div v-show="amount>=0">$<span class="number" :data-value="amount"></span></div>
        </div>
        <el-row class="q-mb-md">
            <el-col :span="3">
                <div class="count-sub-title">最新数据</div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">订单量</div>
                    <div class="text-count">{{ dataStatisticsNew.quantity }}</div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">销售额</div>
                    <div class="text-count">${{ dataStatisticsNew.total_price }}</div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">件数</div>
                    <div class="text-count">{{ dataStatisticsNew.skuquantity }}</div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">广告花费</div>
                    <div class="text-count">{{ dataStatisticsNew.advertising_spend }}</div>
                </div>
            </el-col>
            <el-col :span="1"> </el-col>
        </el-row>
        <el-row>
            <el-col :span="3">
                <div class="count-sub-title">昨日数据</div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">订单量</div>
                    <div class="text-count">{{ dataStatisticsLast.quantity }}</div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">销售额</div>
                    <div class="text-count">${{ dataStatisticsNew.total_price }}</div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">件数</div>
                    <div class="text-count">{{ dataStatisticsLast.skuquantity }}</div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="flex column align-center justify-center">
                    <div class="text-title">广告花费</div>
                    <div class="text-count">{{ dataStatisticsLast.advertising_spend }}</div>
                </div>
            </el-col>
            <el-col :span="1"> </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'DataScreen',

    props: {
        params: {
            type: Object,
            default: () => {},
        },
    },

    data() {
        return {
            dataStatisticsNew: {
                quantity: undefined,
                total_price: undefined,
                skuquantity: undefined,
                advertising_spend: undefined,
            },
            dataStatisticsLast: {
                quantity: undefined,
                total_price: undefined,
                skuquantity: undefined,
                advertising_spend: undefined,
            },
        }
    },
    watch: {
        params: {
            handler(val) {
                this.dataStatisticsNew = val.DataStatisticsNew
                this.dataStatisticsLast = val.DataStatisticsLast
            },
            deep: true,
            immediate: true,
        },
        amount: {
            handler() {
                    this.$nextTick(()=>{
                        this.upDateNumber()
                    })
            },
            immediate: true,
        }
    },
    computed: {
        amount() {
            return this.dataStatisticsNew.total_price
        },
    },
    created() {},
    mounted() {},
    methods: {
        upDateNumber() {
            const numberEle = document.querySelector('.number')
            numberEle.innerText = 0
            const upDateNumber = () => {
                // 获取每个类名为number的data-value,即获取最大值
                const target = Number(numberEle.getAttribute('data-value'))
                // 获取当前div的数值
                const d = Number(numberEle.innerText)

                // 设置数据增加的值，可以通过target除的数值确定怎么加数值的快慢
                const increment = target / 200

                // 当数字小于最大值时，执行下面的操作
                if (d < target) {
                    // 向上取整
                    numberEle.innerText = `${Math.ceil(d + increment)}`
                    // 1ms重新调用，不然它会在第一次运行完就结束
                    setTimeout(upDateNumber, 1)
                } else {
                    numberEle.innerText = target
                }
            }
            upDateNumber()
        },
    },
}
</script>

<style scoped>
.count-title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 6%;
}
.count-sub-title {
    padding-top: 16px;
    text-align: center;
}

.text-title {
    font-size: 14px;
    color: rgb(141, 126, 246);
}
.text-count {
    margin-top: 8px;
    font-size: 24px;
    font-weight: bold;
}
</style>
